<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<title>test</title>
<link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<style>
    body{margin: 10px;}
</style>
<html>
<body>

<div class="layui-tab layui-tab-card" lay-filter="demo" >
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="1">energy真实设备</li>
        <li lay-id="2">iot模拟设备</li>
    </ul>
    <div class="layui-tab-content" style="height: 900px;">
        <div class="layui-tab-item">
            <iframe data-frameid="energy" src="/energy" style="width:100%;height:900px"></iframe>
        </div>
        <div class="layui-tab-item">
<!--            <iframe data-frameid="iot" src="/iot" style="width:100%;height:900px;"></iframe>-->
        </div>
    </div>
</div>




<script th:inline="none" type="text/javascript">

    $(function () {
        //加载模块
        layui.use(['element','layer', 'laytpl','table'],function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){// //得到各种内置组件
            var  layer = layui.layer //弹层
                ,laypage = layui.laypage //分页
                ,laydate = layui.laydate //日期
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传
                ,element = layui.element //元素操作
                ,slider = layui.slider //滑块
                ,dropdown = layui.dropdown //下拉菜单
                ,laytpl=layui.laytpl
                ,element = layui.element //Tab的切换功能，切换事件监听等，需要依赖element模块;
                ;
            //切换刷新
            element.on('tab(demo)', function(data){
                var src=$(".layui-tab-item.layui-show").find("iframe").attr("src");
                $(".layui-tab-item.layui-show").find("iframe").attr("src",src);
            });
            //触发事件
            var active = {
                tabChange: function(){
                    console.log('tabChange');
                    //切换到指定Tab项
                    element.tabChange('demo', '1');
                }
            };
            //默认第一页
            active.tabChange('demo','1');

            function ajax(url,data,callback){
                $.ajax({
                    dataType:'json',
                    contentType: "application/json; charset=utf-8",
                    url: url,
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg("启动成功");
                            table.reload('iot');
                        } else {
                            layer.msg("启动失败:"+data.msg);
                        }
                    }
                });
            }
        });


    });






</script>
</body>

</html>



